<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>调试测试</title>
</head>
<body>
    <h1>调试测试页面</h1>
    
    <h2>1. 测试复制功能</h2>
    <button onclick="testCopy()">测试复制功能</button>
    <div id="copyResult"></div>
    
    <h2>2. 测试图片响应格式化</h2>
    <button onclick="testImageFormat()">测试图片格式化</button>
    <div id="imageResult"></div>
    
    <h2>3. 测试URL匹配</h2>
    <button onclick="testUrlMatch()">测试URL匹配</button>
    <div id="urlResult"></div>

    <script>
        // 复制测试内容
        const testUrl = "https://example.com/test-image.jpg";
        
        // 测试复制功能
        function testCopy() {
            console.log('开始测试复制功能');
            const result = document.getElementById('copyResult');
            result.innerHTML = '<p>正在测试...</p>';
            
            simpleCopy(testUrl);
        }
        
        // 测试图片格式化
        function testImageFormat() {
            console.log('开始测试图片格式化');
            const result = document.getElementById('imageResult');
            
            const formatted = formatImageResponse(testUrl, "这是一个测试图片");
            result.innerHTML = formatted;
        }
        
        // 测试URL匹配
        function testUrlMatch() {
            console.log('开始测试URL匹配');
            const result = document.getElementById('urlResult');
            
            const testTexts = [
                "这是一个图片链接：https://example.com/image.jpg",
                "图片地址：https://test.com/pic.png?v=123",
                "https://cdn.example.com/images/test.webp",
                "没有图片链接的文本"
            ];
            
            let output = '<h4>URL匹配测试结果：</h4>';
            
            testTexts.forEach((text, index) => {
                const match = text.match(/(https?:\/\/[^\s]+\.(jpg|jpeg|png|gif|webp|bmp|svg)(\?[^\s]*)?)/i);
                output += `<p><strong>测试${index + 1}:</strong> ${text}</p>`;
                output += `<p>匹配结果: ${match ? match[0] : '未匹配到'}</p><br>`;
            });
            
            result.innerHTML = output;
        }
        
        // 复制函数（从原文件复制）
        function simpleCopy(text) {
            console.log('simpleCopy 被调用:', text);
            
            // 方法1: 尝试现代API
            if (navigator.clipboard) {
                navigator.clipboard.writeText(text).then(() => {
                    console.log('现代API复制成功');
                    showNotification('✅ 链接已复制到剪贴板！', 'success');
                }).catch(err => {
                    console.log('现代API失败，尝试传统方法:', err);
                    fallbackCopy(text);
                });
            } else {
                console.log('不支持现代API，使用传统方法');
                fallbackCopy(text);
            }
        }
        
        // 传统复制方法
        function fallbackCopy(text) {
            const textArea = document.createElement('textarea');
            textArea.value = text;
            textArea.style.position = 'fixed';
            textArea.style.left = '-999999px';
            textArea.style.top = '-999999px';
            document.body.appendChild(textArea);
            textArea.focus();
            textArea.select();
            
            try {
                const successful = document.execCommand('copy');
                if (successful) {
                    console.log('传统方法复制成功');
                    showNotification('✅ 链接已复制到剪贴板！', 'success');
                } else {
                    console.log('传统方法也失败了');
                    showCopyDialog(text);
                }
            } catch (err) {
                console.log('传统方法异常:', err);
                showCopyDialog(text);
            } finally {
                document.body.removeChild(textArea);
            }
        }
        
        // 显示复制对话框
        function showCopyDialog(text) {
            const dialog = document.createElement('div');
            dialog.style.cssText = `
                position: fixed;
                top: 0;
                left: 0;
                width: 100%;
                height: 100%;
                background: rgba(0, 0, 0, 0.8);
                display: flex;
                justify-content: center;
                align-items: center;
                z-index: 10000;
            `;
            
            dialog.innerHTML = `
                <div style="background: white; padding: 20px; border-radius: 10px; max-width: 90%; max-height: 90%;">
                    <h3>📋 复制链接</h3>
                    <p>请手动复制以下链接：</p>
                    <textarea readonly style="width: 100%; height: 100px; padding: 10px; border: 1px solid #ccc; border-radius: 5px; font-family: monospace;">${text}</textarea>
                    <div style="text-align: right; margin-top: 15px;">
                        <button onclick="this.closest('div').parentElement.remove()" style="background: #007bff; color: white; border: none; padding: 8px 16px; border-radius: 4px; cursor: pointer;">关闭</button>
                    </div>
                </div>
            `;
            
            document.body.appendChild(dialog);
            
            // 自动选中文本
            const textarea = dialog.querySelector('textarea');
            textarea.focus();
            textarea.select();
            
            // 点击背景关闭
            dialog.onclick = (e) => {
                if (e.target === dialog) {
                    dialog.remove();
                }
            };
            
            showNotification('⚠️ 请手动复制链接', 'warning');
        }
        
        // 格式化图片响应（从原文件复制）
        function formatImageResponse(imageUrl, content) {
            const imageId = 'img_' + Date.now() + '_' + Math.random().toString(36).substr(2, 9);

            return `🎉 <strong>图片生成成功！</strong><br><br>
                    
                    <!-- 图片预览区域 -->
                    <div style="background: #f8f9fa; padding: 15px; border-radius: 8px; margin: 15px 0; border: 1px solid #e9ecef;">
                        <div style="text-align: center; margin-bottom: 15px;">
                            <div id="${imageId}_loading" style="color: #6c757d; font-size: 14px;">
                                🔄 正在加载图片预览...
                            </div>
                            <img id="${imageId}" 
                                 style="max-width: 100%; max-height: 400px; border-radius: 6px; box-shadow: 0 2px 8px rgba(0,0,0,0.1); display: none;" 
                                 onload="document.getElementById('${imageId}_loading').style.display='none'; this.style.display='block';"
                                 onerror="handleImageError('${imageId}', '${imageUrl}')"
                                 alt="生成的图片" />
                            <div id="${imageId}_error" style="display: none; color: #dc3545; font-size: 14px; margin-top: 10px;">
                                ⚠️ 图片预览失败，可能需要通过代理访问
                            </div>
                        </div>
                        
                        <!-- 操作按钮 -->
                        <div style="text-align: center; margin-top: 15px;">
                            <button onclick="simpleCopy('${imageUrl}')" 
                                    style="background: #007bff; color: white; border: none; padding: 8px 16px; border-radius: 4px; margin: 0 4px; cursor: pointer; font-size: 13px;">
                                📋 复制链接
                            </button>
                            <button onclick="window.open('${imageUrl}', '_blank')" 
                                    style="background: #28a745; color: white; border: none; padding: 8px 16px; border-radius: 4px; margin: 0 4px; cursor: pointer; font-size: 13px;">
                                👁️ 新窗口查看
                            </button>
                        </div>
                        
                        <!-- 图片链接 -->
                        <details style="margin-top: 15px;">
                            <summary style="cursor: pointer; color: #6c757d; font-size: 13px;">🔗 查看原始链接</summary>
                            <div style="margin-top: 8px; padding: 8px; background: white; border-radius: 4px; border: 1px solid #dee2e6;">
                                <code style="word-break: break-all; font-size: 11px; color: #495057;">${imageUrl}</code>
                            </div>
                        </details>
                    </div>
                    
                    💡 <strong>使用提示：</strong><br>
                    • 点击"新窗口查看"在新标签页中打开图片<br>
                    • 复制链接可以分享给其他人<br>
                    • 建议及时保存，链接可能有时效性<br>
                    
                    <script>
                        // 尝试加载图片预览
                        setTimeout(() => {
                            const img = document.getElementById('${imageId}');
                            if (img) {
                                img.src = '${imageUrl}';
                            }
                        }, 500);
                    <\/script>`;
        }
        
        // 显示通知
        function showNotification(message, type = 'info') {
            const notification = document.createElement('div');
            notification.className = `notification notification-${type}`;
            notification.textContent = message;

            notification.style.cssText = `
                position: fixed;
                top: 20px;
                right: 20px;
                background: ${type === 'success' ? '#4CAF50' : type === 'warning' ? '#FF9800' : type === 'error' ? '#f44336' : '#2196F3'};
                color: white;
                padding: 12px 20px;
                border-radius: 8px;
                z-index: 10000;
                box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
                max-width: 300px;
                word-wrap: break-word;
            `;

            document.body.appendChild(notification);

            setTimeout(() => {
                if (notification.parentNode) {
                    notification.parentNode.removeChild(notification);
                }
            }, 3000);
        }
    </script>
</body>
</html>